<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .modal {
            position: relative;
            left: 25%;
            width: 300px;
            top: 30px;
            box-shadow: 5px 5px 5px 5px #e3e3e3;
        }

        .header {
            position: relative;
            font-size: larger;
            padding-top: 5px;
            padding-left: 10px;
        }

        .body {
            display: flex;
            padding: 20px;
            flex-direction: column;
            align-items: center;
        }

        .close {
            position: absolute;
            right: 20px;
            color: rgba(21, 21, 23, 0.47);
        }
    </style>
</head>

<body>
    <button class="login">登陆</button>
    <button class="delete">删除</button>
    <div>
    </div>
    <script>
        // function Star(uname, age) {
        //     this.uname = uname;
        //     this.age = age;
        //     this.song = function () {
        //         console.log("1234");
        //     }
        // }
        // const me = new Star("Daniel", 22);
        // console.log(me);

        // console.dir(Star.prototype);


        // const arr = new Array(8, 2, 37, 3, 2, 6, 5, 6);
        // // 求最大值
        // Array.prototype.max = function () {
        //     return Math.max(...this);
        // }
        // console.log(arr.max());
        // // 求最小值
        // Array.prototype.min = function () {
        //     return Math.min(...this);
        // }
        // console.log(arr.min());
        // // 求和
        // Array.prototype.sum = function () {
        //     return this.reduce((prev, cur) => prev + cur)
        // }
        // console.log(arr.sum());

        // // 对象原型和原型对象
        // console.log(arr.__proto__)
        // console.log(Array.prototype)
        // console.log(arr.__proto__ === Array.prototype)


        // 继承 (inherit)
        // function Human() {
        //     this.head = 1,
        //         this.eyes = 2
        // }
        // function Women() {
        // }
        // // 重点
        // Women.prototype = new Human();
        // Women.prototype.constructor = Women;
        // Women.prototype.boobies = function () {
        //     console.log("we have boobies");
        // };
        // const nadia = new Women();

        // function Men() {
        // }
        // Men.prototype = new Human;
        // const daniel = new Men();
        // Men.prototype.constructor = Men;

        // console.log(nadia);
        // console.log(daniel);


        const password = '25840';
        function Modal(passwd) {
            this.modalBox = document.createElement('div');
            this.modalBox.className = 'modal';
            if (passwd != password) {
                this.modalBox.innerHTML = `
                <div class="header">温馨提示<i class="close">x</i></div>
                <div class="body">您没有删除权限操作</div>`
            }
            else {
                this.modalBox.innerHTML = `
                <div class="header">温馨提示<i class="close">x</i></div>
                <div class="body">操作成功</div>`
            }
            console.log(this.modalBox);
        }
        Modal.prototype.open = function () {
            const box = document.querySelector('.modal');
            box && box.remove();
            document.body.append(this.modalBox);

            this.modalBox.querySelector('.close').addEventListener('click', () => {
                this.close();
            })
        }
        Modal.prototype.close = function () {
            this.modalBox.remove();
        }
        document.querySelector('.delete').addEventListener('click', () => {
            const del = new Modal('25840');
            del.open()
        })


    </script>
</body>

</html>